<template lang="pug">
  .important-wrap
    .important-info
      .row
        div(
          v-for="columnName in infoList"
          :key="columnName"
          :class="columns[columnName].columnSize | columnGird")
          info-render(
            v-if="formValues"
            :data="formValues[columnName]"
            :column="columns[columnName]"
            :full="formValues"
            :minLength="columns[columnName].minLength"
            :isWarp="true")
            template(slot-scope="props")
              //- 多媒体图片
              .file-warp(v-if="columns[columnName].file || columns[columnName].dataType === 'upload'")
                span.important-label {{columns[columnName].label}}：
                FileBox.important-tpl(:fileList="props.content")
              //- 按钮
              .btn-wrap(v-else-if="columns[columnName].dataType === 'BUTTON' || columns[columnName].dataType === 'button'")
                // span.important-label {{columns[columnName].label}}:
                SmartLink.important-tpl(v-bind="columns[columnName]")
              //- 地图经纬度
              .map-wrap(v-else-if="columns[columnName].dataType === 'LONLAT' || columns[columnName].dataType === 'location'")
                span.important-label {{columns[columnName].label}}:
                MapRender.important-tpl(v-bind="columns",:lnglat="formValues[columnName]")
              //- 颜色色块
              span(v-else-if="columns[columnName].isColor")
                .important-label {{columns[columnName].label}}：
                input(type="color" :value="props.content" disabled="true")
              //- 默认显示字段
              div(v-else)
                span.important-label {{columns[columnName].label}}：
                | {{ props.content }} {{columns[columnName].unit ? columns[columnName].unit : ''}}
        slot
</template>

<script>
/**
 * @name importantInfo 组件
 * @editeAuthor 黄丰瑞 <huangfr@gddit.com>
 * @description 通过字段数组, 字段配置， 字段值 形成重要信息
 */
import InfoRender from '@/components/InfoRender'
import FileBox from '@/components/FileBox'
import SmartLink from '@/components/SmartForm/SmartFormItem/SmartLink'
import MapRender from './MapRender'
export default {
  name: 'importantInfo',
  components: {
    InfoRender,
    SmartLink,
    FileBox,
    MapRender
  },
  props: {
    infoList: Array, // 字段数组
    formValues: Object, // 字段值
    columns: Object // 字段配置
  },
  filters: {
    columnGird (columnSize = [
      { type: 'md', size: '6' },
      { type: 'sm', size: '12' }
      // { type: 'lg', size: '12' }
    ]) {
      return columnSize.map(size => {
        return `col-${size.type}-${size.size}`
      })
    } // 计算信息项长度
  }
}
</script>
<style scoped lang="sass">
.important-wrap
  font-size: 14px
  padding: 12px 15px
  line-height: 2.4
  border: 1px solid #ddd
  .important-info
    margin: 0 auto
    .important-label
      font-weight: bold
</style>
